ShopifyのECサイトにBrazeを使ってメッセージ表示をしてみた

ShopifyのECサイトにBrazeを使ってメッセージ表示をしてみた

Clock Icon2022.06.06

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

ネット初心者でも簡単にECサイトが構築できるShopify!
そのShopifyとBrazeが連携できることは以前の記事でもお伝えをさせていただきました。

▼ShopifyとBrazeの連携記事

今回は連携後のさらなる活用としてBrazeを使いECサイト内にメッセージの表示を行なってみます。

ShopifyのECサイトにSDKを埋め込む

ShopifyのECサイト内にメッセージ表示をさせるときの手順ですが、実はBrazeの連携とは別にSDKの埋め込みが必要になってきます。

BrazeのSDKを埋め込む方法は以下3パターン。

  • NPMまたはYarnを使用
  • GTMを使用
  • CDNをHTMLに埋め込む

今回は「CDNをHTMLに埋め込む」を採用します。

SDKの埋め込みはShopifyの管理画面で

SDKのコードをECサイトに埋め込む作業はShopifyの管理画面から行います。
管理画面の左メニューでオンラインストア>テーマを選択します。
オンラインストア>テーマ
現在ECサイトで使用しているテーマのアクション>コードを編集を選択。
テーマのアクション>コードを編集
theme.liquidのheadタグ内にSDKのコードを埋め込みます。
theme.liquidのheadタグ内
SDKのコードはBrazeドキュメントにも記載がありますので、今回はここから活用しました。

APIキーとSDKポイントはBrazeのダッシュボードから引っ張ってきます。
braze管理画面

SDK埋め込み後はBrazeでメッセージの設定

SDKを埋め込んだ後はBrazeのダッシュボードでメッセージの設定をします。
今回はキャンバスで設定。
メッセージの設定は他の記事でも紹介してますのでここでは割愛します。

メッセージのトリガーをセッションにしてECサイトを訪問するとBrazeで設定したメッセージが表示されました。

Brazeメッセージ

Shopifyとの連携でパーソナライズしたメッセージも配信可能

今回のデモサイトでは、セグメントを作成せずに配信しましたが、ShopifyとBrazeを連携するとShopifyならではのセグメントでメッセージやメールの配信も可能になります。

"Shopifyならではのセグメント"とは例えば以下のようなパターンのセグメント作成もできるようになるんですね。

  • ECサイトで購入した人
  • ECサイトでカートに入れたけど購入まで行かなかった人
  • ECサイトのメルマガ購読に登録してる人

などなど。

ShopifyとBrazeを連携して取得できる詳しい測定値についてはこちらの記事でも紹介してます。

ShopifyとBrazeを連携させたセグメントでの配信記事はまた別の機会で紹介させていただきます。
クラスメソッドではBrazeの導入支援から導入後のサポートも一貫して行なっております。
Brazeについてご興味ある方はぜひお問合せください。

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.